<template>
    <div style="width:100%;height:100%;overflow: hidden;">
     <div id="main-map"></div>
    </div>
</template>
<script>
import geoJson from '../../public/data/track'
import $ from 'jquery';
import {TrackPlayer} from '../../js/trackplayer'
import smartmapx from "@smx/api";
import {img} from '../../src/assets/car.png'

export default {
    data () {
        return {
         map:null,
         context:null,
         data :null,
         trackPlayer:undefined,
         EARTH_RADIUS: 6378.137
        }
    },
    mounted() {
        this.init();
    },
    methods:{
        init(){
          this.smartmapx.mapbase = 'http://www.smartmapx.com';
          this.smartmapx.apikey = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYmYiOjE1MzcxODM1OTgsImRhdGEiOiJ7XCJsb2dpbl9uYW1lXCI6XCJyb290XCIsXCJnZW5kZXJcIjoyLFwidXNlcl9pZFwiOlwiZm1fc3lzdGVtX3VzZXJfcm9vdFwiLFwidXNlcl9uYW1lXCI6XCJyb290XCIsXCJ1c2VyX29yaWdpbl9pZFwiOlwiZm1fbG9jYWxcIixcInByb2R1Y3RfaWRcIjpcIlwiLFwiZXhwaXJlX3RpbWVcIjpcIlwiLFwic291cmNlX2lkXCI6XCJcIixcInR5cGVcIjpcIlwiLFwiY29ycF9pZFwiOlwiZm1fc3lzdGVtX2NvcnBcIn0iLCJleHAiOjQwOTI1OTkzNDksImp0aSI6ImFfNjhmZjBhZGY5OTcxNDQ0NThjNzViZWFiN2FjNTkzYWYifQ.W122WkT6QR4HZWbpalkpmirV9JWkDYcCkmNZoxCB_z8';
          this.map=new this.smartmapx.Map({
              container: 'main-map',
              mapId: 'map_id_1',
              center: [116.39738, 39.90579],
              zoom: 10
            });
            this.map.addControl(new this.smartmapx.NavigationControl(),'top-right');
            this.map.addControl(new this.smartmapx.ScaleControl({
              maxWidth: 100,
              unit: 'm'
            }));
          
            this.map.on('load',() =>{
                this.map.addSource('line',{
                type: 'geojson',
                data: geoJson
            });
            this.map.addLayer({
                "id": "runLine",
                "type": "line",
                "source": "line",
                "paint": {
                    "line-width": 3,
                    "line-opacity": 0.9,
                    "line-color": "red"
                 }
               });
                this.startPlay();
            });
        },

        startPlay(){
            this.trackPlayer = new TrackPlayer(geoJson,{
            speedMultiplier: 40,
            speed: 200,
            eachMoveDistance: this.getEachMoveLength,
            });
            console.log(geoJson,99)
            this.trackPlayer.start();
            var el = document.createElement('div');
            el.className = 'marker';
            el.style.backgroundImage = 'url(http://www.smartmapx.com/map/api/img/plane.png)';
            el.style.backgroundSize = '40px 40px';
            el.style.width = '40px';
            el.style.height = '40px';
            var plane =new this.smartmapx.Marker(el).setLngLat(geoJson.geometry.coordinates[0])
                .addTo(this.map);
            this.trackPlayer.on(TrackPlayer.EVENT.PLAYING,  (e)=> {
                var lngLat = e.currentPosition.geometry.coordinates;
                plane.setLngLat(lngLat);
                plane.setRotate(e.heading);
            });
            this.trackPlayer.on(TrackPlayer.EVENT.STOP,  (e)=> {
                // $('.marker').remove();
                // var time = setInterval( ()=> {
                //     if(this.map.isStyleLoaded()){
                //         this.startPlay();
                //         clearInterval(time);
                //     };
                // },1000);
            });
        },
     
        rad(d) {
            return d * Math.PI / 180.0;
         },

        getDistance(lat1, lng1, lat2, lng2) {
            var radLat1 = this.rad(lat1);
            var radLat2 = this.rad(lat2);
            var a = radLat1 - radLat2;
            var b = this.rad(lng1) - this.rad(lng2);
            var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
                Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
            s = s * this.EARTH_RADIUS;
            s = Math.round(s * 10000) / 10000;
            return s;
            },

        getEachMoveLength() {
            var lngLat1 = this.map.unproject([100, 100]);
            var lngLat2 = this.map.unproject([101, 101]);
            // console.log(lngLat1,lngLat2)
            return this.getDistance(lngLat1.lat, lngLat1.lng, lngLat2.lat, lngLat2.lng);
        }
    }
}
</script>
<style lang="scss" scoped>
#main-map{
    width: 100%;
    height: 100%;
}
</style>